<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-button
        type="primary"
        style="float: left"
        @click="openModel"
      >新增模版</el-button>
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="templateType" label="模版类型" width="180" />
        <el-table-column prop="transportType" label="运送类型" width="180" />
        <el-table-column prop="associatedCityList" label="关联城市" />
        <el-table-column prop="firstWeight" label="首重" />
        <el-table-column prop="continuousWeight" label="续重" />
        <el-table-column prop="lightThrowingCoefficient" label="轻抛类型" />
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="Edit(row)"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: black"
              size="small"
              @click="del(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="ModelTitle"
      :visible="dialogVisible"
      width="30%"
      append-to-body
      @close="cancel"
    >
      <!-- :before-close="handleClose" -->
      <el-form
        ref="form"
        label-width="100px"
        :model="formData"
        :rules="formRules"
      >
        <el-form-item label="模板类型" prop="templateType">
          <el-select
            v-model="formData.templateType"
            style="width:350px"
            placeholder="请选择模板类型"
            :clearable="true"
            @change="changeTem"
          >
            <el-option label="同城寄" value="1" />
            <el-option label="省内寄" value="2" />
            <el-option label="经济区互寄" value="3" />
            <el-option label="跨省" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select
            v-model="formData.transportType"
            style="width:350px"
            placeholder="请选择运送类型"
            :clearable="true"
          >
            <el-option label="普快" value="1" />
            <el-option label="特快" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="associatedCityList">
          <el-checkbox-group v-if="formData.templateType === '3' || formData.templateType === '经济区互寄'" v-model="formData.associatedCityList">
            <el-checkbox
              v-for="city in cities"
              :key="city"
              :label="city"
            >{{ city }}</el-checkbox>
          </el-checkbox-group>
          <span v-else>全国</span>

        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input
            v-model="formData.firstWeight"
            style="width:350px"
            placeholder="请选择首重价格"
          />
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input
            v-model="formData.continuousWeight"
            style="width:350px"
            placeholder="请选择续重价格"
          />
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input
            v-model="formData.lightThrowingCoefficient"
            style="width:350px"
            placeholder="请选择轻抛系数"
          />
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendModel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { TransitList, addOrModifyTransit, delTransit } from '@/api/base'
import { cloneDeep } from 'lodash'
export default {
  name: 'Transit',
  data() {
    return {
      list: [],
      // 模态框默认是false
      dialogVisible: false,
      formData: {
        // 模版类型 , 运送类型 , 关联城市
        templateType: null,
        transportType: null,
        associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null
      },
      modifyEndFormData: {},
      cities: ['京津冀', '江浙沪', '川渝', '黑吉辽'],
      formRules: {
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change' }
        ],
        associatedCityList: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ModelTitle() {
      return this.formData.id ? '编辑模态框' : '新增模态框'
    }
  },
  async created() {
    await this.getTransitList()
  },
  methods: {
    async getTransitList() {
      const res = await TransitList()
      this.handleData(res)
    },
    // 完成数据处理 渲染到界面
    handleData(data) {
      this.list = data.map((item) => {
        switch (+item.templateType) {
          case 1:
            item.templateType = '同城寄'
            break
          case 2:
            item.templateType = '省内寄'
            break
          case 3:
            item.templateType = '经济区互寄'
            break
          case 4:
            item.templateType = '跨省'
            break
          default:
            break
        }
        switch (+item.transportType) {
          case 1:
            item.transportType = '普快'
            break
          case 2:
            item.transportType = '特快'
            break
          default:
            break
        }
        switch (+item.associatedCityList[0]) {
          case 1:
            item.associatedCityList = '全国'
            break
          case 2:
            item.associatedCityList = '京津冀'
            break
          case 3:
            item.associatedCityList = '江浙沪'
            break
          case 4:
            item.associatedCityList = '川渝'
            break
          case 5:
            item.associatedCityList = '黑吉辽'
            break
          default:
            break
        }
        // debugger // 将 item原本的数据 进行替换
        return item
      })
    },
    // 处理编辑数据
    handleEditData(data) {
      switch (data.templateType) {
        case '同城寄':
          data.templateType = 1
          break
        case '省内寄':
          data.templateType = 2
          break
        case '经济区互寄':
          data.templateType = 3
          break
        case '跨省':
          data.templateType = 4
          break
        default:
          break
      }
      switch (data.transportType) {
        case '普快':
          data.transportType = 1
          break
        case '特快':
          data.transportType = 2
          break
        default:
          break
      }
      return data
    },
    // 打开模态框
    async openModel() {
      if (!this.EditId) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = true
      }
    },
    changeTem(e) {
      if (e !== '3') {
        this.formData.associatedCityList = ['全国']
      }
    },
    // 提交表单
    async sendModel() {
      await this.$refs.form.validate()
      if (!this.formData.id) {
        await addOrModifyTransit(this.formData)
        this.$message.success('新增成功')
      } else {
        // cloneDeep(this.formData)
        const deepData = cloneDeep(this.formData)
        await addOrModifyTransit(this.handleEditData(deepData))
        this.$message.success('修改成功')
      }
      this.cancel()
      this.getTransitList()
    },
    // 取消提交
    async cancel() {
      // debugger
      await this.$refs.form?.resetFields()
      if (this.formData.id || this.formData.templateType) {
        this.formData = {
          // 模版类型 , 运送类型 , 关联城市
          templateType: null,
          transportType: null,
          associatedCityList: [],
          firstWeight: null,
          continuousWeight: null,
          lightThrowingCoefficient: null
        }
        this.dialogVisible = false
        return
      }
      this.dialogVisible = false
    },
    // 编辑
    async Edit(row) {
      // this.ModelTitle = '编辑模态框'
      const deepRow = cloneDeep(row)
      // 添加城市回显校验
      if (typeof deepRow.associatedCityList === 'string') {
        deepRow.associatedCityList = [deepRow.associatedCityList]
      }
      console.log(deepRow.associatedCityList)
      this.formData = deepRow
      this.openModel()
    },
    // 删除模板
    async del(id) {
      await delTransit(id)
      this.getTransitList()
      this.$message.success('删除成功')
    },
    // 处理选中城市变化
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  border-radius: 8px;
}
// 头部样式
::v-deep.el-dialog__header {
  background-color: #f3f4f7;
}
::v-deep .el-form-item__label {
  font-weight: 400;
  color: #20232a;
}
::v-deep .el-dialog__body {
  padding: 15px 20px;
}
::v-deep .el-dialog__footer {
  display: flex;
  justify-content: center;
}
</style>
